import React, { Component} from 'react'
import { connect} from 'react-redux'
import { List, NavBar, InputItem, Grid, Icon} from 'antd-mobile'

import { getChatMsg, hadReadMsg} from '../../redux/actions'

const Item = List.Item

class Chat extends Component{

    state = {
        content:'',
        isShow: false
    }

    //这里是设置系统的滚动条  使得进入聊天时或者发送消息的时候看到的是最后一条
    //不用手动去往上拉  才能看到下面的消息
    //
    componentDidMount(){
        window.scrollTo(0, document.body.scrollHeight)

        //这里要获取to from 以及
        const to = this.props.match.params.userid
        const from = this.props.user._id
        //此时在这里发送请求
        this.props.hadReadMsg({ from, to})
    }

    //上面是 不在聊天画面的 处理的 已读消息
    //下面是在聊天 画面的 处理已读消息
    componentWillUnmount(){
        //这里要获取to from 以及
        const to = this.props.match.params.userid
        const from = this.props.user._id
        //此时在这里发送请求
        this.props.hadReadMsg({ from, to})
    }

    componentDidUpdate(){
        window.scrollTo(0, document.body.scrollHeight)
    }

    handleMsg = () => {
        //此时收集什么 第一 from to content
        //from --> user里面的user  _id
        //to 因为此时我们是使用 路由来传递数据  此时 可以在match中的params获取传递的数据
        //content  状态获取
        const from = this.props.user._id
        const to = this.props.match.params.userid
        const content = this.state.content.trim()//去两边的空格
        if(content){
            this.setState({content:'', isShow: false})
            this.props.getChatMsg({from, to, content})
        }
    }

    //这里处理表情显示与否
    toggleEnjoin = () => {
        const isShow = !this.state.isShow
        this.setState({
            isShow
        })
        //这里是为了解决九宫格的显示问题 为window添加一个resize事件即可
        //即要显示的时候才添加
        if (isShow){
            setTimeout(() =>{
                window.dispatchEvent(new Event('resize'))
            })
        }
    }




    render(){
        /*
            在这里准备数据 表情数据
         */
        const brows = ['💰','👑', '☪', '🌱', '☘','🐶', '🐒', '💥', '🙈',
            '☀', '🏈',  '🦃', '💘', '👰','⛄', '🎿', '⚽', '🌎', '👰',
            '👬 ', '👭', '💑', '‍👨', '👩‍❤️‍👩', '🎩', '🌎', '👰', '👫',
            '☀', '🏈',  '🦃', '💘', '👰','⛄', '🎿', '⚽', '🌎', '👰', '👫',
            '👬 ', '👭', '💑', '‍👨', '👩‍❤️‍👩', '🎩', '🌎', '👰', '👫'
            ]

        //此时这里产生表情数组  因为是九宫<Grid data={}>   里面的数据必须是 数组包含这对象  对象里面是icon 以及text
        this.enjoins = brows.map((enjoin) =>({text:enjoin}))

        /*
       在这里显示要显示的内容
           1 获取用户的聊天信息
           2 获取 自己的_id 以及 对方_id 排序的到chatId
           3 与cgatMsgs的chat_id比较 过滤双方的聊天信息  因为这里面包含所有用户的聊天信息
               但是此时只显示 双方的聊天信息
          4 显示即可
    */
        const { user} = this.props
        //此时头像只有发信息才能有 不然没有头像 这个情况  只出现在 这个应用在第一个人 以及第二个人注册才会出项
        const { users, chatMsgs} = this.props.chatMsgList
        //获取自己_id
        //console.log(users)
        const meId = user._id
        // console.log(meId)
        // console.log(users[meId])
        if(!users[meId]){
            return <div className='notFind'>正在玩命加载...</div>
        }
        //获取对方的_id
        const targetId = this.props.match.params.userid
        //排序  得到 chatId
        const chatId = [meId, targetId].sort().join('_')//此时这里必须与后台一致
        //过滤 双方的消息  此时msgs代表的是 双方的聊天信息
        const msgs = chatMsgs.filter(msg => msg.chat_id === chatId)
        //获取头像信息  当第一个 以及 第二个注册的时候  会出现错误这里先返回一个

        const meHeader = require(`../../assets/images/${users[meId].header}.png`)
        const targetHeader =require(`../../assets/images/${users[targetId].header}.png`)
        /*
            下面显示的时候  要分情况  对方的消息  以及我的消息  显示位置不一样
                要进行判断  通过from与to的_id判断要显示的位置
                我发送给对方的from是自己的_id
                to即为对方的_id
         */
        return(
        <div id='chat-pag'>
            <NavBar
                className='NavTop'
                icon={<Icon type="left" />}
                onLeftClick={(ev) => {this.props.history.replace('/message')}}

                >{users[targetId].username}</NavBar>
              <div className='chat-msg'>
                  {
                      msgs.map(msg =>{
                          if (targetId != msg.to){
                              return (
                                  <div key={msg._id} className='common friend'>
                                      <img src={targetHeader} alt=""/>
                                      <div><p>{msg.content}</p></div>
                                  </div>
                              )
                          } else{
                              return(
                                  <div key={msg._id} className='common me'>
                                      <img src={meHeader} alt=""/>
                                      <div><p>{msg.content}</p></div>
                                  </div>
                              )
                          }
                      })
                  }
              </div>
            <div className='inputText'
            onKeyUp={(ev) =>{ if (ev.key === 'Enter'){this.handleMsg()} }}>
                <InputItem placeholder="请输入"
                           value={this.state.content}
                           onChange={(val) => this.setState({content: val})}
                    extra={
                        <span>
                            <span onClick={this.toggleEnjoin} style={{ marginRight:10}}>‍👨</span>
                            <span onClick={this.handleMsg}>发送</span>
                        </span>
                    }
                />
                {
                    this.state.isShow ?(
                        <Grid
                            data={this.enjoins}
                            columnNum={ 8}
                            carouselMaxRow={3}
                            isCarousel ={ true}
                            onClick={(data) => {this.setState({content: this.state.content + data.text})}}
                        />
                    ):null
                }
            </div>
        </div>
        )
    }
}

export default connect(
    state => ({ user:state.user, chatMsgList:state.getMsgList}),
    { getChatMsg, hadReadMsg}
)(Chat)